@extends('layout.app')
@section('title','Участники')
@section('content')

    <div class="flex justify-between items-center">

        <h1 class="text-[#232323] text-[40px] font-medium">Список участников</h1>
        <div class="flex gap-[10px]">
            <a href="{{ route('members.add') }}" class="flex gap-[10px] bg-[#3042D0] text-white rounded-[5px] p-[15px] inline-block">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
                    <path d="M11.6673 2.16663H5.00065C4.55862 2.16663 4.1347 2.34222 3.82214 2.65478C3.50958 2.96734 3.33398 3.39127 3.33398 3.83329V17.1666C3.33398 17.6087 3.50958 18.0326 3.82214 18.3451C4.1347 18.6577 4.55862 18.8333 5.00065 18.8333H15.0007C15.4427 18.8333 15.8666 18.6577 16.1792 18.3451C16.4917 18.0326 16.6673 17.6087 16.6673 17.1666V7.16663L11.6673 2.16663Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M11.666 2.16663V7.16663H16.666" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M10 15.5V10.5" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M7.5 13H12.5" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>

                <span>Добавить участника</span>

            </a>
            <button type="button" id="export_button" data-url="/members/excel"
                    class="flex gap-[10px] bg-[#EB692C] text-white rounded-[5px] p-[15px] inline-block">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
                    <path d="M12.5 12.1667L16.6667 8.00004L12.5 3.83337" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M3.33398 17.1667V11.3333C3.33398 10.4493 3.68517 9.60143 4.31029 8.97631C4.93542 8.35119 5.78326 8 6.66732 8H16.6673" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <span>
                    Экспортировать
                </span>
            </button>
        </div>
    </div>


    <div class="mt-[50px]">
        <form action="{{ route('members') }}" method="GET" >
            @csrf
            @method('GET')
            <div class="grid grid-cols-6 gap-x-[20px] gap-y-[30px]">
                <div class="col-span-2 flex gap-[5px] flex-wrap flex-col">
                    <h2 class="filter__title">Центр</h2>

                    <div class="flex flex-col gap-[20px]">


                        <select name="filters[centers_id][]" id="" multiple>
                            @foreach($centers as $center)
                                <option
                                    value="{{ $center->id }}" @selected(in_array($center->id,request('filters.centers_id') ?? []))>
                                    {{ $center->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>


                </div>
                <div class="col-span-2 flex gap-[5px] flex-wrap flex-col">
                    <h2 class="filter__title">Заболевание</h2>

                    <div class="flex flex-col gap-[20px]">
                        <select name="filters[diagnosis][]" id="" multiple>
                            @foreach($sickness as $sicknes)
                                <option
                                    value="{{ $sicknes->name }}" @selected(in_array($sicknes->name,request('filters.diagnosis') ?? []))>{{$sicknes->name}}
                                </option>
                            @endforeach

                        </select>
                    </div>


                </div>
                <div class="col-span-2 flex items-end">
                    <input type="submit" value="Фильтровать" class="font-bold uppercase w-full bg-[#ffffff] border bordere-solid border-[#23232333] text-[232323] p-[15px] rounded-[5px]">
                </div>

            </div>
         </form>
    </div>
    @if(count($members) != 0)
        <table class="w-full my-[50px]" id="export_table">
            <tbody>
            <tr class="result-top">
                <th class="result-top__item">#</th>
                <th class="result-top__item">ФИО</th>
                <th class="result-top__item">Дата рождения</th>
                <th class="result-top__item">Диагноз</th>
                <th class="result-top__item">ФИО представителя</th>
                <th class="result-top__item">Телефон представителя:</th>
                <th class="result-top__item">Почта:</th>
                <th class="result-top__item">Действия</th>
            </tr>
            @foreach ($members as $key => $member)
                <tr class="result-bottom">
                    <td class="">{{ ($currentPage - 1) * $perPage + $loop->iteration }}</td>
                    <td class="">{{ $member->fullname }}</td>
                    <td class=""> {{ $member->birthday }}</td>
                    <td class=""> {{ $member->diagnosis }}</td>
                    <td class="">{{  $member->fullname_agent }}</td>
                    <td class="">{{ $member->agent_phone }}</td>
                    <td class="">{{ $member->email }}</td>

                    <td class="">
                        <div class="flex items-center justify-between">
                            <a href="{{ route('members.edit', $member->id)  }}" class="p-2">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                     stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"/>
                                </svg>
                            </a>
                            <form action="{{ route('members.delete', $member->id)  }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                         stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
                                    </svg>
                                </button>
                            </form>
                        </div>

                    </td>

                </tr>
            @endforeach


            </tbody>
        </table>

        {{ $members->withQueryString()->links() }}
    @else
        <h1 class="text-2xl font-bold mt-[50px]">Данные не найдены</h1>
    @endif

@endsection
